<template>
  <div class="login-page">
    <!-- 顶部导航 -->
    <van-nav-bar title="用户登录" left-arrow @click-left="$router.go(-1)" />

    <!-- 登录表单 -->
    <div class="login-container">
      <!-- Logo区域 -->
      <div class="logo-section">
        <div class="logo">
          <van-icon name="user-circle-o" size="60" color="#1989fa" />
        </div>
        <h1 class="app-title">普通话学习</h1>
        <p class="app-subtitle">让学习更简单</p>
      </div>

      <!-- 表单区域 -->
      <van-form @submit="handleSubmit" class="login-form">
        <van-cell-group inset>
          <van-field
            v-model="formData.username"
            name="username"
            label="用户名"
            placeholder="请输入用户名"
            :rules="[{ required: true, message: '请输入用户名' }]"
            left-icon="contact"
            clearable
          />
          <van-field
            v-model="formData.password"
            type="password"
            name="password"
            label="密码"
            placeholder="请输入密码"
            :rules="[{ required: true, message: '请输入密码' }]"
            left-icon="lock"
            clearable
          />
        </van-cell-group>

        <!-- 登录选项 -->
        <div class="login-options">
          <van-checkbox v-model="rememberMe">记住密码</van-checkbox>
          <span class="forgot-password" @click="handleForgotPassword">忘记密码？</span>
        </div>

        <!-- 登录按钮 -->
        <div class="login-actions">
          <van-button
            round
            block
            type="primary"
            native-type="submit"
            :loading="loading"
            loading-text="登录中..."
            size="large"
          >
            登录
          </van-button>
        </div>
      </van-form>

      <!-- 注册链接 -->
      <div class="register-link">
        <span>还没有账号？</span>
        <span class="register-text" @click="goToRegister">立即注册</span>
      </div>

      <!-- 第三方登录 -->
      <!-- <div class="third-party-login">
        <div class="divider">
          <span>其他登录方式</span>
        </div>
        <div class="social-buttons">
          <van-button
            icon="wechat"
            round
            size="large"
            color="#07c160"
            @click="handleWechatLogin"
          >
            微信登录
          </van-button>
        </div>
      </div> -->
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { showToast, showLoadingToast, closeToast } from 'vant';
import { AuthService } from '@/api/services';
import { AuthUtils } from '@/utils/auth';

const router = useRouter();
const route = useRoute();

// 表单数据
const formData = reactive({
  username: '',
  password: ''
});

const rememberMe = ref(false);
const loading = ref(false);

// 处理登录提交
const handleSubmit = async (values: any) => {
  loading.value = true;

  try {
    console.log('🔐 开始登录请求...');
    const result = await AuthService.login({
      username: values.username,
      password: values.password
    });

    if (result) {
      console.log('✅ 登录API调用成功:', result);

      // 使用AuthUtils处理登录成功
      // result现在直接是后端返回的data部分
      AuthUtils.handleLoginSuccess(result);

      // 如果选择记住密码，保存到本地存储
      // if (rememberMe.value) {
      //   localStorage.setItem('rememberedUsername', values.username);
      // } else {
      //   localStorage.removeItem('rememberedUsername');
      // }

      showToast('登录成功');
      console.log('🎉 登录成功，Token已保存');

      // 延迟跳转，让用户看到成功提示
      setTimeout(() => {
        // 获取重定向路径
        const redirectPath = route.query.redirect as string;

        // 如果有重定向路径且不是登录页面，则跳转回原页面
        if (redirectPath && redirectPath !== '/login') {
          console.log('🔄 登录成功，重定向到原页面:', redirectPath);
          router.replace(redirectPath);
        } else {
          // 否则跳转到首页
          console.log('🔄 登录成功，跳转到首页');
          router.replace('/home');
        }
      }, 1000);
    }
  } catch (error: any) {
    console.error('❌ 登录失败:', error);
    const errorMsg = error?.message || error?.response?.data?.message || '登录失败，请重试';
    showToast(errorMsg);
  } finally {
    loading.value = false;
  }
};

// 忘记密码
const handleForgotPassword = () => {
  showToast('请联系管理员重置密码');
};

// 跳转注册
const goToRegister = () => {
  router.push('/register');
};

// 微信登录
const handleWechatLogin = () => {
  showToast('微信登录功能开发中');
};

// 页面加载时检查是否有记住的用户名
const checkRememberedUsername = () => {
  const rememberedUsername = localStorage.getItem('rememberedUsername');
  if (rememberedUsername) {
    formData.username = rememberedUsername;
    rememberMe.value = true;
  }
};

// 初始化
checkRememberedUsername();
</script>

<style scoped lang="scss">
.login-page {
  min-height: 100vh;
  background-color: #f7f8fa; // 项目统一背景色

  .login-container {
    padding: 4.26667vw; // 项目标准内边距
    min-height: calc(100vh - 46px);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .logo-section {
    text-align: center;
    margin-bottom: 8vw;
    padding: 6.4vw 4.26667vw;

    .logo {
      margin-bottom: 4vw;
    }

    .app-title {
      font-size: 6.4vw; // 项目大标题尺寸
      font-weight: bold;
      color: #1989fa; // 项目主题色
      margin: 0 0 2vw 0;
    }

    .app-subtitle {
      font-size: 3.73333vw; // 项目小字尺寸
      color: #969799; // 项目次要文字色
      margin: 0;
    }
  }

  .login-form {
    margin-bottom: 6vw;

    :deep(.van-cell-group) {
      border-radius: 2.13333vw; // 项目标准圆角
      overflow: hidden;
    }

    :deep(.van-field) {
      padding: 4.26667vw; // 项目标准内边距

      .van-field__label {
        font-size: 4.26667vw; // 项目正文尺寸
        color: #323233; // 项目主文本色
        font-weight: 500;
      }

      .van-field__control {
        font-size: 4.26667vw; // 项目正文尺寸
        color: #323233; // 项目主文本色
      }

      .van-icon {
        font-size: 4.8vw; // 项目中标题尺寸
        color: #1989fa; // 项目主题色
      }
    }
  }

  .login-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6vw;
    padding: 4.26667vw 2vw; // 项目标准内边距

    :deep(.van-checkbox) {
      .van-checkbox__label {
        font-size: 3.73333vw; // 项目小字尺寸
        color: #646566; // 项目次文本色
      }

      .van-checkbox__icon {
        font-size: 4.26667vw;
      }
    }

    .forgot-password {
      font-size: 3.73333vw; // 项目小字尺寸
      color: #1989fa; // 项目主题色
      text-decoration: none;
      cursor: pointer;

      &:hover {
        color: #0e7ce2; // 主题色深色变体
      }
    }
  }

  .login-actions {
    margin-bottom: 6vw;

    :deep(.van-button) {
      height: 12vw;
      font-size: 4.26667vw; // 项目正文尺寸
      font-weight: bold;
      background-color: #1989fa; // 项目主题色
      border-color: #1989fa;
      box-shadow: 0 2px 4px rgba(25, 137, 250, 0.3); // 主题色阴影

      &:active {
        background-color: #0e7ce2; // 主题色深色变体
        border-color: #0e7ce2;
      }
    }
  }

  .register-link {
    text-align: center;
    margin-bottom: 8vw;
    font-size: 3.73333vw; // 项目小字尺寸
    color: #646566; // 项目次文本色
    padding: 4.26667vw 2vw; // 项目标准内边距

    .register-text {
      color: #1989fa; // 项目主题色
      font-weight: bold;
      margin-left: 1vw;
      cursor: pointer;
      text-decoration: none;

      &:hover {
        color: #0e7ce2; // 主题色深色变体
      }
    }
  }

  .third-party-login {
    .divider {
      text-align: center;
      margin-bottom: 4vw;
      position: relative;

      &::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        height: 1px;
        background: #ebedf0; // 项目边框色
      }

      span {
        background-color: #f7f8fa; // 项目背景色
        padding: 0 4vw;
        font-size: 3.73333vw; // 项目小字尺寸
        color: #969799; // 项目辅助文字色
      }
    }

    .social-buttons {
      display: flex;
      justify-content: center;

      :deep(.van-button) {
        height: 10vw;
        font-size: 3.73333vw; // 项目小字尺寸
        padding: 0 6vw;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); // 项目按钮阴影

        .van-icon {
          margin-right: 2vw;
          font-size: 4.26667vw;
        }
      }
    }
  }

  // 响应式适配
  @media (min-width: 768px) {
    .login-container {
      max-width: 400px;
      margin: 0 auto;
      padding: 32px;
    }

    .logo-section {
      .app-title {
        font-size: 28px;
      }

      .app-subtitle {
        font-size: 14px;
      }
    }

    .login-form {
      :deep(.van-field) {
        padding: 16px;

        .van-field__label,
        .van-field__control {
          font-size: 16px;
        }
      }
    }

    .login-options {
      font-size: 14px;
      padding: 16px;
    }

    .login-actions {
      :deep(.van-button) {
        height: 48px;
        font-size: 16px;
      }
    }

    .register-link {
      font-size: 14px;
      padding: 16px;
    }

    .third-party-login {
      .divider span {
        font-size: 12px;
      }

      .social-buttons {
        :deep(.van-button) {
          height: 40px;
          font-size: 14px;
        }
      }
    }
  }
}
</style>
